<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单,包含了 popper.min.js -->
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>TomatoClock.JS 番茄钟</title>
    <!--suppress HtmlUnknownTarget, HtmlUnknownTarget -->
    <link rel="stylesheet" type="text/css" href="/css/myStyle.css">
    <script src="/JsTools/clock.js"></script>
</head>

<body>
    <div class="container" id="page1">
        <div class="row">
            <!-- 标题行 -->
            <div class="titleContainer">
                <h1 id="title">Tomato.JS</h1>
            </div>
        </div>
        <div class="row" id="clockContainer">
            <!-- 闹钟部分 -->
            <div class="col-xs-2">
                <div class="numberContainer" id="clock-1">0</div>
            </div>
            <div class="col-xs-2">
                <div class="numberContainer" id="clock-2">0</div>
            </div>
            <div class="col-xs-1" id="colon">:</div>
            <div class="col-xs-2">
                <div class="numberContainer" id="clock-3">0</div>
            </div>
            <div class="col-xs-2">
                <div class="numberContainer" id="clock-4">0</div>
            </div>
        </div>
        <div class="row" id="startButtonContainer">
            <!-- 按钮部分 -->
            <div id="containerButton">
                <button type="button" id="wrappedButton" onclick="startClock()">Start</button>
                <input type="text" id="inputTimes" maxlength="1" value="1">
            </div>
        </div>
        <div class="row">
            <!-- 提示文字和输入框部分 -->
            <div id="wordContainer">
                <p>Work for <input type="text" id="inputWork" maxlength="2" value="25"> minutes</p>
                <p>Rest for <input type="text" id="inputRest" maxlength="2" value="5"> minutes</p>
            </div>
        </div>
    </div>
    <hr class="normal-hr">
    <div id="midPageContainer">
        <!-- 底栏部分 -->
        Sworld
        <div id="accountContainer">
            <button type="button" id="register" onclick="regAccount()">注册</button>
            Name <input type="text" id="accountName" placeholder="请输入昵称">, Password <input type="text" id="accountPsw"
                placeholder="请输入密码">
        </div>
    </div>
    <div class="container-fluid" id="page2">
        <div class="row">
            <div class="col-sm-6 offset-1">
                <!-- 左侧的使用教程等 -->
                <h1>使用教程</h1>
                <a href='https://gitee.com/sworldS/tomato-clock.js/stargazers'><img
                        src='https://gitee.com/sworldS/tomato-clock.js/badge/star.svg?theme=white' alt='star'/></a>
                <a href='https://gitee.com/sworldS/tomato-clock.js/members'><img
                        src='https://gitee.com/sworldS/tomato-clock.js/badge/fork.svg?theme=white' alt='fork'/></a>
                <p>本网页是一个番茄钟,简单来说就是帮助你进行工作的一个闹钟。相信你已经注意到了,主页面上有三个可输入的地方,分别是工作时间、休息时间和按钮上的数字(循环次数),当你设定好之后就可以按下按钮来开启番茄钟</p>
                <p>关于账号系统,你可以在页面角落找到注册的按钮和输入框,输入后就能注册,密码请不要使用你任何重要账号的密码,因为我的加密系统还没有做完,注册提示成功后,每次只需要输入账号和密码然后就可以查询数据或者开启番茄钟,数据会自动同步到服务器</p>
                <p>本项目目前开源在<a href="https://gitee.com/sworldS/tomato-clock.js">Gitee</a>上，你如果感兴趣的话可以看看，如果有建议或者发现BUG也可以提交issue或者直接联系我(t.sworld@qq.com)</p>
            </div>
            <div class="col">
                <!-- 右侧的统计数据、排行榜等 -->
                <div id="statistics">
                    <h1>统计数据</h1>
                    <button id="getStastistics" class="midButton" onclick="getStatistics()">获取数据</button>
                    <button id="delAccount" class="midButton" onclick="delAccount()">注销账户</button>
                    <ul>
                        <li id="wins">成功次数:</li>
                        <li id="fails">失败次数:</li>
                        <li id="time">完成时间:</li>
                    </ul>
                </div>
                <div>
                    <h1>TOPS</h1>
                    <ul id="tops">
                        <li>占位符</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>


</html>